<script lang="ts" setup>
import { UploadImageAPI } from '@/api/common';
import { useConsultStore } from '@/store/Consult';
import type { PatientConsultOrderParams } from '@/types/Department';
import { ref } from 'vue';

// 病情描述数据
const FormData = ref<
  Pick<PatientConsultOrderParams,'illnessDesc' | 'illnessTime' | 'consultFlag' | 'pictures'>
>({
  illnessDesc: '', // 病情描述
  illnessTime: 1, // 患病时间
  consultFlag: 0, // 咨询标志
  pictures: [], // 图片列表
})

// 患病时长
const illnessTimes = [
  { value: 1, text: '一周内' },
  { value: 2, text: '一月内' },
  { value: 3, text: '半年内' },
  { value: 4, text: '半年以上' },
]

// 是否就诊
const consultFlags = [
  { value: 0, text: '未就诊' },
  { value: 1, text: '就诊过' },
]

// 上传图片
const handleSelect = async (event:UniHelper.UniFilePickerOnSelectEvent) => {
  // console.log(event.tempFilePaths);
  // 获取上传图片链接
  const filePath = event.tempFilePaths[0]
  const res = await UploadImageAPI(filePath)
  // console.log(res);
  // 将图片链接添加到图片列表中
  FormData.value.pictures?.push(res.data)
}

// 删除图片
const handleDelete = (event:UniHelper.UniFilePickerOnDeleteEvent) => {
  // console.log(event.index);
  FormData.value.pictures?.splice(event.index,1)
}

const store = useConsultStore()
if (store.illnessInfo.illnessDesc) {
  uni.showModal({
    title: '温馨提示',
    content: '是否恢复之前填写的病情信息',
    confirmText: '确认',
    confirmColor: '#16C2A3',
    cancelColor: '#848484',
    success(result) {
      if (result.confirm) {
        FormData.value = store.illnessInfo
      }
    },
  })
}

// 下一步操作
const props = defineProps<{
  depId: string,
  illnessType: string,
  type: string
}>()
// 下一步
const handleNext = () => {
  // 保存病情描述
  store.illnessInfo = FormData.value

  // 保存页面参数到 store中:问诊类型,医院类型
  store.type = props.type
  store.illnessType = props.illnessType
  store.depId = props.depId
  // 跳转至选择科室页面
  uni.navigateTo({
    url:'/subpkg_archive/pages/list/list?type=consult'
  })
}


</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
          v-model="FormData.illnessDesc"
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text 
          v-for="item in illnessTimes" 
          :key="item.value" 
          class="tag"
          :class="{ active:FormData.illnessTime === item.value}"
          @click="FormData.illnessTime = item.value"
          >
          {{ item.text }}
        </text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text 
          v-for="item in consultFlags" 
          :key="item.value" 
          class="tag"
          :class="{ active:FormData.consultFlag === item.value}"
          @click="FormData.consultFlag = item.value"
          >{{ item.text }}</text>
          
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
          v-model="FormData.pictures"
          @select="handleSelect"
          @delete="handleDelete"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button 
      :disabled="FormData.illnessDesc.trim() === ''"
      class="uni-button" @click="handleNext">下一步</button>
    </view>
    {{ FormData }}
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>